<template>
  <div v-if="!loading" style="width: 1000px; margin: 90px auto; display: flex">
    <!-- 左边 -->
    <div style="width: 60%">
      <el-card>
        <div style="display: flex; justify-content: start">
          <el-input v-model="search" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="search_job">搜索</el-button>
        </div>
      </el-card>
      <div class="my-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="职位推荐" name="recomment"></el-tab-pane>
          <el-tab-pane label="今日精选" name="selection"></el-tab-pane>
        </el-tabs>
      </div>
      <router-view />
    </div>
    <!-- 右边总-->
    <div style="width: 40%">
      <!-- 最上面 -->
      <div>
        <div style="margin-left: 10px; width: 100%">
          <el-card>
            <div style="display: flex; justify-content: start">
              <img :src="avatarUrl" width="80" height="80" />
              <span style="margin-left: 20px; margin-top: 10px; font-size: 25px">{{
                employeeName
              }}</span>
            </div>
            <div style="margin: 20px 0px; font-size: 14px; color: #858585">
              工作不足一年
            </div>
            <div class="right_mid">
              <div v-for="option in options" :key="option.title" @click="optionClick(option.title)">
                <div :class="option.icon" style="font-size:2em"></div>
                <div style="font-size:0.9em; margin-top: 3px">{{ option.title }}</div>
              </div>
            </div>
          </el-card>
        </div>

      </div>
      
    </div>
  </div>
</template>

<script>
import mitter from '../../../plugins/mitter'
export default {
  data: () => ({
    loading: true,
    search: "",
    activeName: "recomment",
    username: null,
    employeeName: null,
    number: null,
    options: [
      { icon: 'el-icon-refresh', title: '刷新简历' },
      { icon: 'el-icon-tickets', title: '编辑简历' },
      { icon: 'el-icon-s-tools', title: '设置' },
      { icon: 'el-icon-close', title: '退出登录' }
    ],
    avatarUrl: null
  }),
  created() {
    this.number = 0;
    this.username = sessionStorage.getItem("username");
    this.loading = true;
    this.axios
      .get("/employee/get-info", {
        params: {
          username: this.username,
        },
      })
      .then((res) => {
        if (res.data.code == 200) {
          this.employeeName = res.data.data.name;
          this.avatarUrl = res.data.data.avatarUrl;
          localStorage.setItem("avatarUrl", this.avatarUrl);
        }
        this.loading = false;
      });
  },
  methods: {
    handleClick() {
      this.$router.push("/employee/" + this.activeName);
    },
    change(index) {
      this.imgUrl[index] = this.imgUrl2[index];
    },
    comeback(index) {
      this.imgUrl[index] = this.imgUrl3[index];
    },
    notes() {
      this.$router.push("/employee/notes");
    },
    search_job() {
      mitter.emit('search', this.search)
    },
    optionClick(title) {
      if (title == '退出登录') {
        this.axios.get("/user/logout").then(res => {
          if (res.data.code == 200) {
            sessionStorage.removeItem("username")
            this.$router.push("/")
          }
        })
      }else if(title == '编辑简历'){
        this.$router.push('/employee/notes')
      }
    }
  },
};
</script>

<style>
.my-card {
  margin-top: 10px;
  position: sticky;
  top: 72px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 5px 5px 0px 5px;
}
.el-icon-refresh-right {
  size: 200px;
}
.clearfix {
  border-top: 1px solid rgb(172, 172, 172);
  padding: 10px;
  margin: -10px;
  display: flex;
  justify-content: space-between;
}
.right_font {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.right_mid {
  display: flex;
  justify-content: space-between;
}
.right_mid > div {
  text-align: center;
  width: 80px;
  cursor: pointer;
  color: gray;
  user-select: none;
}
.right_mid>div:hover {
  color: #F9835D;
}
</style>